<template>
  <view class="user" :style="themeStyle">
    <!-- #ifdef APP-PLUS -->
    <view class="status_bar"></view>
    <!-- #endif -->
    <view>
      <!-- 个人信息 -->
      <view class="person_info">
        <!-- #ifndef MP-WEIXIN -->
        <my-navbar
          title="我的"
          leftText=""
          leftIcon=""
          :color="globalData.themeConfig.text_color"
          :background="navBackground"
        ></my-navbar>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <my-wxCustomTitleBar 
          :color="globalData.themeConfig.text_color" 
          class="wxnavbar"
          title="我的" 
          :leftIcon="false" 
          :background="navBackground"
        ></my-wxCustomTitleBar>
        <my-wxCustomTitleBar title=" " :leftIcon="false"></my-wxCustomTitleBar>
        <!-- #endif -->
        <div class="person_info_box">
          <view class="flex flex_row_between avator">
            <view class="flex flex_col_center">
              <view>
                <image
                  @click="changeAva"
                  :src="avatarUrl"
                  mode="aspectFit"
                ></image>
              </view>
              <view class="custom" v-if="showLoginBtn">
                <button class="login_but" size="mini" @click="toLogin">
                  立即登录
                </button>
              </view>
              <view class="custom" v-else>
                <view class="nickname">{{ name }}</view>
                <view class="tel">{{ tel }}</view>
              </view>
            </view>
            <view class="right_icon">
              <view class="iconfont icon-shezhi" @click="toSetting"></view>
            </view>
          </view>
          <view class="top_box">
            <div
              class="top_part"
              v-for="(item, index) in topParts"
              :key="index"
              @click="pageUrl(item.path, item.icon)"
            >
              <view class="total">{{ item.value }}</view>
              <text class="top_part_text">{{ item.name }}</text>
            </div>
          </view>
        </div>
        <!-- 我的订单 -->
        <view class="user_top_order">
          <view class="user_top_order_title">
            <text>我的订单</text>
            <view class="all-order" @click="toOrder(0)">
              <text>全部订单</text>
              <image
                src="https://copartner.oss-cn-beijing.aliyuncs.com/logo/2401/10/KHQ1NPteO5cO9WpiXfFCpwANwb8axQ9kpI6KnPEl.png"
              ></image>
            </view>
          </view>
          <view class="user_top_order_icon">
            <view class="user_top_order_icon_box" @click="toOrder(1)">
              <view class="iconfont icon-shenhe"></view>
              <text>待审核</text>
            </view>
            <view class="user_top_order_icon_box" @click="toOrder(2)">
              <view class="iconfont icon-beihuozhong"></view>
              <text>备货中</text>
            </view>
            <view class="user_top_order_icon_box" @click="toOrder(3)">
              <view class="iconfont icon-peisong"></view>
              <text>配送中</text>
            </view>
            <view class="user_top_order_icon_box" @click="toOrder(4)">
              <view class="iconfont icon-yiwancheng"></view>
              <text>已完成</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 大众推荐 -->
      <!-- <view class="public_recommend flex flex_col_center flex_row_center">
	  	<image :src="banner" mode="aspectFit"></image>
	  </view> -->
      <!-- 常用工具 -->
      <view class="tools">
        <view class="tools_title"> 常用工具 </view>
        <view class="tools_box">
          <view
            class="tools_box_icon"
            v-for="(item, index) in list"
            :key="index"
            @click="pageUrl(item.path, item.icon)"
          >
            <image :src="`../../static/image/user/${item.icon}.png`"></image>
            <text>{{ item.name }}</text>
          </view>
        </view>
      </view>
      <!-- 帮助中心 -->
      <view class="tools">
        <view class="tools_title"> 帮助中心 </view>
        <view class="tools_box">
          <view
            class="tools_box_icon"
            v-for="(item, index) in mainList"
            :key="index"
            @click="pageUrl(item.path, item.icon)"
          >
            <image :src="`../../static/image/user/${item.icon}.png`"></image>
            <text>{{ item.name }}</text>
          </view>
        </view>
      </view>
      <!-- 更多功能 -->
      <view class="flex flex_row_around more_function" v-if="filing_wartermark==1">
        <view @click="caidj" class="bot flex-center">
          <image src="/static/image/caidj.svg"></image>
          <text>菜东家提供技术支持</text>
        </view>
      </view>
      <u-mask
        :show="showMask"
        @click="showMask = false"
        :custom-style="{ background: 'rgba(0, 0, 0, 0.7)' }"
      >
        <image class="share" :src="shareImg" mode="aspectFit"></image>
      </u-mask>
    </view>
    <my-tabar ref="tabar" current="4"></my-tabar>
  </view>
</template>

<script>
// #ifdef H5
var wx = require("jweixin-module");
// #endif
// import avatar from '../../components/yq-avatar/yq-avatar.vue'
let app = getApp();
let globalData = getApp().globalData;
import { $https } from "@/static/js/request.js";
export default {
  data() {
    return {
      globalData,
      wxconfig: null,
      token: null,
      loginVolid: null,
      avatarUrl: "../../static/image/avatar.png",
      banner:
        "https://copartner.oss-cn-beijing.aliyuncs.com/logo/2312/08/Dx3bknXlmVLMhSQ115eqY1WmN1Ee89vOBsKY69lT.png",
      shareImg:
        "https://copartner.oss-cn-beijing.aliyuncs.com/logo/2401/22/idEahwsw2QK1bRjPPkjKFz04w25Uhf5vk6jUipCt.png",
      showMask: false,
      topParts: [
        {
          value: 0,
          name: "差额",
          path: "/subpack/user/balance/balance",
        },
        {
          value: 0,
          name: "优惠券",
          path: "/subpack/user/coupon/coupon_my",
        },
        {
          value: 0,
          name: "积分",
          path: "/subpack/user/integral/integral_my",
        },
      ],
      name: "",
      tel: "",
      // balance:0,
      // coupons_num:0,
      // points:0,	//积分
      list: [],
      toolsList: [
        {
          icon: "address",
          name: "收货地址",
          path: "/subpack/user/change/edit_address",
        },
        {
          icon: "shop",
          name: "购买记录",
          path: "/subpack/user/buy_history/buy_history",
        },
        {
          icon: "start",
          name: "我的收藏",
          path: "/subpack/user/collect",
        },
        {
          icon: "common",
          name: "常用",
          path: "/subpack/user/common",
        },
        {
          icon: "order",
          name: "退货单",
          path: "/subpack/user/return_goods/return_goods",
        },
        {
          icon: "bill",
          name: "账单列表",
          path: "/subpack/user/bill/bill",
        },
        {
          icon: "Invoice",
          name: "发票信息",
          path: "/subpack/user/invoice",
        },
        {
          icon: "doc",
          name: "结算单",
          path: "/subpack/user/final_statement/final_statement",
        },
        {
          icon: "account",
          name: "子账号",
          path: "/subpack/user/child/child_list",
        },
        {
          icon: "share",
          name: "分享",
          path: "",
        },
      ],
      mainList: [
        {
          icon: "couple",
          name: "反馈问题",
          path: "/subpack/user/feedback",
        },
        {
          icon: "after",
          name: "售后规则",
          path: "/subpack/account/treaty?type=4",
        },
        {
          icon: "service",
          name: "服务条款",
          path: "/subpack/account/treaty?type=3",
        },
        {
          icon: "about",
          name: "关于我们",
          path: "/subpack/account/treaty?type=2",
        },
        // {
        // 	icon: 'cegl',
        // 	name: '差额管理',
        // 	path:'/subpack/user/balance/balance',
        // },
        // #ifndef APP-PLUS
        {
          icon: "wxchat",
          name: "绑定微信",
          path: "",
        },

        // #endif
      ],
      childList: [
        {
          icon: "address",
          name: "收货地址",
          path: "/subpack/user/change/edit_address",
        },
        {
          icon: "shop",
          name: "购买记录",
          path: "/subpack/user/buy_history/buy_history",
        },
        {
          icon: "order",
          name: "退货单",
          path: "/subpack/user/return_goods/return_goods",
        },
        {
          icon: "bill",
          name: "账单列表",
          path: "/subpack/user/bill/bill",
        },
        {
          icon: "share",
          name: "分享",
          path: "",
        },
      ],
      openid: "", //是否绑了微信，为‘’就是没绑
      action: "",
      showLoginBtn: false, //是否显示登录按钮
      shareInfo: {}, //分享配置
      filing_wartermark: 1, // 是否显示水印
      navBackground: "", // 头部背景
    };
  },
  computed: {
    themeStyle() {
      return `
        --theme-bg: url(${globalData.themeConfig.user_center_img || "https://copartner.oss-cn-beijing.aliyuncs.com/logo/2401/17/kBTemVLjvz0h82TJUI0WfCG896mgCffBC4vuL64K.png"});
        --theme-text-color: ${globalData.themeConfig.text_color || "#000000"};
        --theme-time-color: ${globalData.themeConfig.text_color2 || "#40AE36"};
        --theme-bg-color: ${globalData.themeConfig.theme_color || "#F6F6F7"};
      `;
    },
  },
  onReady() {
    getApp().setTitle();
    uni.hideTabBar();
  },
  onLoad() {
    //上传地址
    this.action = `${getApp().globalData.rootUrl}/partner/uploadFeedImg`;
    this.loginVolid = !Boolean(uni.getStorageSync("loginVolid").is_login_my);
    let ismain = uni.getStorageSync("isMain");
    if (ismain) {
      this.list = this.toolsList;
    } else {
      this.list = this.childList;
      this.mainList = this.mainList.filter((item) => item.name != "反馈问题");
    }
    //#ifdef H5
    this.wxConfig();
    //#endif
    let openPoints = uni.getStorageSync("open_points");
    if (!openPoints) {
      this.topParts.splice(2, 1);
    }
  },
  onShow() {
    this.token = uni.getStorageSync("copartner_token");
    this.filing_wartermark = uni.getStorageSync("filing_wartermark"); // 1:显示水印 0:不显示水印
    //#ifdef H5
    let state = this.getQueryVariable("state");
    if (state) {
      this.token = "Bearer " + state;
      // uni.setStorage('copartner_token',this.token)
      uni.setStorage({
        key: "copartner_token",
        data: this.token,
        success: () => {
          this.bindWx();
        },
      });
    }
    //#endif
    if (this.token) {
      this.showLoginBtn = false;
      this.getData();
    } else {
      this.showLoginBtn = true;
    }
    this.$nextTick(function () {
      this.$refs.tabar.changetag();
    });
  },
  created() {
    // 监听从裁剪页发布的事件，获得裁剪结果
    uni.$on("uAvatarCropper", (path) => {
      // this.avatarUrl = path;
      // 可以在此上传到服务端
      uni.uploadFile({
        url: this.action,
        filePath: path,
        name: "img",
        formData: {
          type: 2,
        },
        header: {
          Authorization: uni.getStorageSync("copartner_token"),
        },
        success: (res) => {
          let data = JSON.parse(res.data);
          $https(
            "POST",
            "changeAvatar",
            {
              avatar: data.data.img_path,
            },
            (result) => {
              if (result.data.errcode == 0) {
                this.avatarUrl = data.data.src;
              } else {
                uni.showToast({
                  icon: "none",
                  title: result.data.errmsg,
                });
              }
            }
          );
        },
        fail() {
          uni.showToast({
            icon: "none",
            title: "上传失败，请重试",
          });
        },
      });
    });
  },
  methods: {
    caidj() {
      location.href = "https://www.caidj.cn";
    },
    getData() {
      $https("GETN", "getUserInfo", {}, (res) => {
        if (res.data.errcode == 0) {
          this.name = res.data.data.nickname;
          this.tel = res.data.data.mobile;
          this.topParts[0].value = res.data.data.balance;
          this.topParts[1].value = res.data.data.coupons_num;
          // 是否开启了积分
          if(this.topParts[2]){
            this.topParts[2].value = res.data.data.points;
          }
          this.avatarUrl = res.data.data.avatar;
          this.openid = res.data.data.openid;
          let ismain = res.data.data.user_type == 1 ? true : false; //1:主账号，2：子账号
          // this.filing_wartermark = res.data.data.filing_wartermark; // 1:显示水印 0:不显示水印
          if (ismain) {
            this.list = this.toolsList;
          } else {
            this.list = this.childList;
            this.mainList = this.mainList.filter(
              (item) => item.name != "反馈问题"
            );
          }
          uni.setStorageSync("isMain", ismain);
          uni.setStorageSync("cartTag", res.data.data.all_cart_num);
          uni.setStorageSync("userInfo",{
            username:res.data.data.nickname,
            id: res.data.data.id
          });
          this.$refs.tabar.changetag();
        } else {
          uni.showToast({
            icon: "none",
            title: res.data.errmsg,
          });
        }
      });
      if (!uni.getStorageSync("title")) {
        $https(
          "GETN",
          "loginInfo",
          {},
          (res) => {
            uni.setNavigationBarTitle({
              title: res.data.data.info.site_title,
            });
            if(res.data.data.homepage_theme) {
              uni.setStorageSync("themeConfig", res.data.data.homepage_theme);
              if(res.data.data.homepage_theme.valid == 1) app.themeConfig = res.data.data.homepage_theme;
            }
            let loginVolid = {
              is_login_index: res.data.data.info.is_login_index,
              is_login_my: res.data.data.info.is_login_my,
              is_login_cart: res.data.data.info.is_login_cart,
              is_login_category: res.data.data.info.is_login_category,
            };
            this.filing_wartermark = res.data.data.filing_wartermark;
            uni.setStorageSync("title", res.data.data.info.site_title);
            uni.setStorageSync("logo", res.data.data.info.site_logo);
            uni.setStorageSync("loginVolid", loginVolid);
            uni.setStorageSync("filing_wartermark", res.data.data.filing_wartermark);
          },
          true
        );
      }
    },
    // 去订单
    toOrder(index) {
      if (this.token) {
        // if (index) {
        // console.log("index", index);
        app.globalData.tabIndex = index;
        // }
        uni.switchTab({
          url: "/pages/tabar/order",
        });
      } else {
        uni.redirectTo({
          url: "/subpack/account/login",
        });
      }
    },
    pageUrl(path, icon) {
      if (this.token) {
        if (icon == "wxchat") {
          if (this.openid) {
            uni.showModal({
              content: "当前账号已绑定过微信，是否改绑?",
              success: (res) => {
                if (res.confirm) {
                  // #ifdef H5
                  $https(
                    "GETN",
                    "wxConfig",
                    {
                      type: "default",
                    },
                    (res) => {
                      if (res.data.errcode == 0) {
                        uni.setStorageSync("isWeixin", true);
                        let url = location.href;
                        url = encodeURIComponent(url);
                        let token = this.token.slice(7);
                        let a = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${res.data.data.appId}&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=${token}#wechat_redirect`;
                        window.location.href = a;
                      } else {
                        uni.showToast({
                          icon: "none",
                          title: "绑定失败，请重试",
                        });
                      }
                    },
                    true
                  );
                  // #endif
                  // #ifdef MP-WEIXIN
                  this.bindWx();
                  // #endif
                } else if (res.cancel) {
                }
              },
            });
          } else {
            // #ifdef H5
            if (this.wxconfig) {
              uni.setStorageSync("isWeixin", true);
              let url = location.href;
              url = encodeURIComponent(url);
              let token = this.token.slice(7);
              let a = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.wxconfig.appId}&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&state=${token}#wechat_redirect`;
              window.location.href = a;
            } else {
              uni.showToast({
                icon: "none",
                title: "获取微信配置失败，请重试",
              });
              this.wxConfig();
            }
            // #endif
            // #ifdef MP-WEIXIN
            this.bindWx();
            // #endif
          }
        } else if (icon == "share") {
          // #ifdef H5
          if (typeof WeixinJSBridge == "undefined") {
            uni.showToast({
              icon: "none",
              title: "请在微信浏览器中分享",
            });
          } else {
            this.showMask = true;
            this.share();
          }
          // #endif
          // #ifdef MP-WEIXIN
          this.shareConfig();
          // #endif
        } else {
          uni.navigateTo({
            url: path,
          });
        }
      } else {
        uni.redirectTo({
          url: "/subpack/account/login",
        });
      }
    },

    //绑定微信
    bindWx() {
      // #ifdef H5
      let code = this.getQueryVariable("code");
      let isWeixin = uni.getStorageSync("isWeixin");
      if (isWeixin && code) {
        uni.setStorage("copartner_token", this.token);
        let params = {
          loginType: "wechat",
          type: "default",
          code: code,
        };
        this.bindWxFunction(params);
      }
      //#endif
      // #ifdef MP-WEIXIN
      uni.login({
        success: (res) => {
          let params = {
            loginType: "wechat",
            type: "mini",
            code: res.code,
          };
          this.bindWxFunction(params);
        },
      });
      // #endif
    },

    bindWxFunction(params) {
      $https("POST", "bindWxCheck", params, (res) => {
        uni.removeStorageSync("isWeixin");
        if (res.data.errcode == 0) {
          uni.showToast({
            icon: "none",
            title: "绑定成功",
            success: () => {
              // #ifdef H5
              relaunch();
              // #endif
            },
          });
        } else if (res.data.errcode == 60022) {
          //已绑定，是否改绑
          uni.showModal({
            content: res.data.errmsg,
            success: (modal) => {
              if (modal.confirm) {
                $https(
                  "POST",
                  "bindWx",
                  {
                    user_openid: res.data.data.user_openid,
                  },
                  (res) => {
                    if (res.data.errcode == 0) {
                      uni.showToast({
                        icon: "none",
                        title: "绑定成功",
                        success: () => {
                          // #ifdef H5
                          relaunch();
                          // #endif
                        },
                      });
                    } else {
                      uni.showToast({
                        icon: "none",
                        title: res.data.errmsg,
                        success: () => {
                          // #ifdef H5
                          relaunch();
                          // #endif
                        },
                      });
                    }
                  }
                );
              } else if (modal.cancel) {
                // #ifdef H5
                uni.reLaunch({
                  url: "/pages/tabar/user",
                });
                // #endif
              }
            },
          });
        } else {
          uni.showToast({
            icon: "none",
            title: res.data.errmsg,
            success: () => {
              // #ifdef H5
              relaunch();
              // #endif
            },
          });
        }
      });
      //h5刷新
      function relaunch() {
        setTimeout(() => {
          uni.reLaunch({
            url: "/pages/tabar/user",
          });
        }, 2000);
      }
    },

    getQueryVariable(variable) {
      var href = window.location;
      var query = href.search.substring(1);
      query = query.replace("%20", " ");
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          console.log(pair[1]);
          return pair[1];
        }
      }
      return false;
    },

    //分享
    share() {
      $https("GET", "shareConfig", {}, (res) => {
        if (res.data.errcode == 0) {
          //分享给朋友
          WeixinJSBridge.on("menu:share:appmessage", function (argv) {
            WeixinJSBridge.invoke(
              "sendAppMessage",
              {
                appid: "", //appid 设置空就好了。
                img_url: res.data.data.share_img, //分享时所带的图片路径
                img_width: "120", //图片宽度
                img_height: "120", //图片高度
                link: res.data.data.share_href, //分享附带链接地址
                desc: res.data.data.share_describe, //分享内容介绍
                title: res.data.data.share_title,
              },
              function (res) {
                /*** 回调函数，最好设置为空 ***/
                this.showMask = false;
              }
            );
          });
          //分享到朋友圈
          WeixinJSBridge.on("menu:share:timeline", function (argv) {
            WeixinJSBridge.invoke(
              "shareTimeline",
              {
                appid: "", //appid 设置空就好了。
                img_url: res.data.data.share_img, //分享时所带的图片路径
                img_width: "120", //图片宽度
                img_height: "120", //图片高度
                link: res.data.data.share_href, //分享附带链接地址
                desc: res.data.data.share_describe, //分享内容介绍
                title: res.data.data.share_title,
              },
              function (res) {
                this.showMask = false;
                /*** 回调函数，最好设置为空 ***/
              }
            );
          });
        } else {
          uni.showToast({
            icon: "none",
            title: res.data.errmsg,
          });
        }
      });
    },

    myUpload(data) {
      uni.uploadFile({
        url: this.action,
        filePath: data.path,
        name: "img",
        formData: {
          type: 2,
        },
        header: {
          Authorization: uni.getStorageSync("copartner_token"),
        },
        success: (res) => {
          let data = JSON.parse(res.data);
          $https(
            "POST",
            "changeAvatar",
            {
              avatar: data.data.img_path,
            },
            (result) => {
              if (result.data.errcode == 0) {
                this.avatarUrl = data.data.src;
              } else {
                uni.showToast({
                  icon: "none",
                  title: result.data.errmsg,
                });
              }
            }
          );
        },
        fail() {
          uni.showToast({
            icon: "none",
            title: "上传失败，请重试",
          });
        },
      });
    },
    //更换头像
    changeAva(index) {
      if (this.token) {
        uni.navigateTo({
          // 关于此路径，请见下方"注意事项"
          url: "/subpack/user/u-avatar-cropper/u-avatar-cropper",
          // 内部已设置以下默认参数值，可不传这些参数
          params: {
            // 输出图片宽度，高等于宽，单位px
            destWidth: 300,
            // 裁剪框宽度，高等于宽，单位px
            rectWidth: 200,
            // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
            fileType: "jpg",
          },
        });
      }
    },

    wxConfig() {
      $https(
        "GETN",
        "wxConfig",
        {
          type: "default",
        },
        (res) => {
          if (res.data.errcode == 0) {
            this.wxconfig = res.data.data;
            wx.config({
              debug: false, // 开启调试模式
              appId: res.data.data.appId, // 必填，公众号的唯一标识
              timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
              nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
              signature: res.data.data.signature, // 必填，签名，见附录1
              jsApiList: ["updateAppMessageShareData", "onMenuShareAppMessage"], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
          } else {
            // uni.showToast({
            // 	icon:'none',
            // 	title:'绑定失败，请重试'
            // })
          }
        },
        true
      );
    },
    //去设置页
    toSetting() {
      if (this.token) {
        uni.navigateTo({
          url: "/subpack/user/setting",
        });
      } else {
        uni.redirectTo({
          url: "/subpack/account/login",
        });
      }
    },

    toLogin() {
      uni.navigateTo({
        url: "/subpack/account/login",
      });
    },

    shareConfig() {
      $https("GET", "shareConfig", {}, (res) => {
        if (res.data.errcode == 0) {
          this.shareInfo = {
            href: res.data.data.share_href,
            title: res.data.data.share_title,
            summary: res.data.data.share_describe,
            imageUrl: res.data.data.share_img,
          };
          this.showMask = true;
        }
      });
    },
    hexToRgba(hex,opacity) {
      // 移除前缀 '#'，然后转换为 RGB 格式
      let r = parseInt(hex.slice(1, 3), 16);
      let g = parseInt(hex.slice(3, 5), 16);
      let b = parseInt(hex.slice(5, 7), 16);
      return `rgba(${r}, ${g}, ${b}, ${opacity})`;
    }
  },

  onShareAppMessage(res) {
    console.log(res, "res");
    return {
      title: this.shareInfo.title,
      path: this.shareInfo.href,
      imageUrl: this.shareInfo.imageUrl,
    };
  },
  onPageScroll(e) {
    this.navBackground = this.hexToRgba(globalData.themeConfig.text_color2,e.scrollTop / 100);
  },
};
</script>

<style lang="scss" scoped>
$bgImage: var(--theme-bg);
$fontColor: var(--theme-text-color);
$buttonColor: var(--theme-time-color);
$bgColor: var(--theme-bg-color);
/deep/.fiexd {
  background: white;
  color: #000;
} 
.user {
  padding-bottom: 20rpx;
  /deep/.u-mask-show {
    opacity: 1;
  }

  .share {
    width: 600rpx;
    position: absolute;
    right: 0;
    top: -120rpx;
  }

  .person_info {
    @include container(750rpx, 563rpx);
    position: relative;
    background-image: $bgImage;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
    margin-bottom: 160rpx;
    padding-top: 1px;
    .person_info_box {
      @include container(calc(100% - 40rpx), calc(100% - 80rpx));
      display: flex;
      flex-direction: column;
      padding: 40rpx 20rpx;
    }

    .avator {
      padding: 0 20rpx;
      box-sizing: border-box;
      .right_icon {
        .iconfont {
          @include font-style(28px, $fontColor, normal, "iconfont");
        }
        image {
          @include container(50rpx, 50rpx);
          margin-left: 20rpx;
        }
      }
    }
    .user_top_order {
      @include container(690rpx, 280rpx, #ffffff);
      border-radius: 10px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 50%);
      .user_top_order_title {
        @include container(600rpx);
        @include flex-layout(space-between, center);
        @include font-style(28rpx, #666666);
        margin: 30rpx auto;
        .all-order {
          @include font-style(24rpx, #666666);
          image {
            @include container(22rpx,22rpx);
            margin-left: 10rpx;
          }
        }
      }
      .user_top_order_icon {
        @include container(600rpx);
        display: flex;
        justify-content: space-between;
        margin: 60rpx auto;
        .user_top_order_icon_box {
          @include font-style(22rpx, #666666);
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          .iconfont {
            @include font-style(22px, $buttonColor, normal, "iconfont");
            margin-bottom: 10rpx;
          }
        }
      }
    }

    .custom {
      margin-left: 32rpx;
      .login_but {
        background: $buttonColor;
        color: $fontColor;
      }
    }

    .nickname {
      @include font-style(30rpx, $fontColor);
    }

    .tel {
      @include font-style(24rpx, $fontColor);
      margin-top: 3px;
    }

    .top_btn {
      @include flex-layout(center, center);
      flex-direction: column;
      margin-top: 50rpx;

      image {
        @include container(70rpx, 70rpx);
        margin-bottom: 12rpx;
      }
    }

    .balance {
      margin-top: 32rpx;
    }

    .top_box {
      display: flex;
      justify-content: space-around;
      padding-top: 30rpx;

      .top_part {
        display: flex;
        flex-direction: column;
        align-items: center;
        .total {
          @include font-style(32rpx, $fontColor);
          margin-bottom: 18rpx;
        }
        .top_part_text {
          @include container(96rpx);
          @include font-style(24rpx, $fontColor);
          @include text-ellipsis;
          text-align: center;
        }
      }
    }
  }

  .more_function {
    //  background: $white;
    border-radius: 10rpx;
    box-shadow: 0 10rpx 14rpx rgba(215, 239, 231, 0.21);
  }

  .more_function {
    flex-wrap: wrap;
    margin: 0 34rpx;
    // padding: 30rpx 36rpx 22rpx;
    justify-content: flex-start;
    margin-bottom: 80rpx;
    position: relative;
    .more_name {
      margin-top: 18rpx;
      width: 112rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
      font-size: 24rpx !important;
      color: #656565 !important;
    }

    .more_box {
      height: 120rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .more_function > view {
    display: flex;
    flex-direction: column;
    align-items: center;

    flex: 0 0 25%;
    color: #bbb;
  }

  .more_function > view:nth-child(n + 5) {
    margin-top: 20rpx;
  }

  .person_info image {
    @include container(108rpx, 108rpx);
    border-radius: 50%;
  }

  // .person_info::after {
  // 	position: absolute;
  // 	right: 20rpx;
  // 	top: -30rpx;
  // 	font-size: 120rpx;
  // 	content: 'MY';
  // 	font-weight: bold;
  // 	color: #F2F8F6;
  // }

  .public_recommend {
    margin: 0 36rpx 10rpx 36rpx;

    image {
      @include container(100%, 164rpx);
    }
  }
}

.delta {
  background: white;
  border-radius: 10rpx;
  padding: 20rpx 20rpx 15rpx 20rpx;
}

.delta > view {
  height: 60rpx;
  line-height: 60rpx;
}

.delta > view:nth-last-child(n + 2) {
  border-bottom: 1px solid black;
}

.bot {
  color: #d5d5d5;
  position: absolute;
  bottom: -90rpx;
  left: 0;
  right: 0;
  image {
    @include container(150rpx, 40rpx);
    display: block;
    margin: 0 auto;
  }
  text {
    @include font-style(20rpx, #999999);
  }
}

.tools {
  @include container(690rpx, auto, #ffffff);
  padding: 30rpx 0 60rpx;
  border-radius: 20rpx;
  margin: 20rpx auto;
  box-sizing: border-box;
  .tools_title {
    @include font-style(28rpx, #333333);
    margin-left: 30rpx;
  }
  .tools_box {
    display: flex;
    flex-wrap: wrap;
    .tools_box_icon {
      @include container(100rpx);
      @include font-style(22rpx, #666666);
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 20rpx calc((690rpx - 100rpx * 5) / 5 / 2);
      image {
        @include container(70rpx, 70rpx);
        margin-bottom: 10rpx;
      }
      text {
        @include container(100rpx);
        @include text-ellipsis;
        text-align: center;
      }
    }
  }
}
</style>